<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="tips">距离双12还有xx天xx小时xx分xx秒</div>
</body>
<script>
    var tips = document.getElementById("tips");

    //  1. 从计时器开始设置,到第一次执行回调函数,需要先等待指定时间(1s) => 在这1s等待时间内  tips还是显示原本内容(真空期)

    // 页面加载时执行一次 
    countDown("2021-12-25 00:00:00","距离圣诞节还有dd天hh时mm分ss秒",tips); 

    // 页面加载完毕 每隔1s执行一次

    // 如果传入的回调函数需要接收参数,从第三参数开始依次向后传
    setInterval(countDown, 1000,"2021-12-25 00:00:00","距离圣诞节还有dd天hh时mm分ss秒",tips); // 直接传

    // setInterval(function(){
    //     countDown("2022-12-25 00:00:00","距离圣诞节还有dd天hh时mm分ss秒",tips);    // 间接传入
    // },500); 




    // endTime -> 结束时间("2022-12-12 00:00:00");
    // pattern -> 输出模板("距离2023年还有dd天hh时mm分ss秒");
    function countDown(endTime,pattern,ele) {
        // 倒计时
        // 获取结束时间 和 当前时间 -> 时间差
        var future = new Date(endTime);
        var now = new Date();
        
        var time = future - now;  // 时间差
        time = parseInt(time / 1000); // 转化为 -> 秒
        console.log(time);

        if(time >= 0){
            // 你: 10000   同桌: 8000    => 1000/8000 = > 1.25
            // 总的时间 / 一天的时间 -> 天的倍数 
            var day = parseInt(time / (24 * 60 * 60));
            console.log(day);

            // 总的时间 % 一天的时间 -> 不满一天的时间
            // 不满一天的时间 / 一小时 -> 小时的倍数(不满一天)
            // var hour = parseInt(time % (24 * 60 * 60) / (60 * 60));
            // console.log(hour);

            // 总的时间 / 一小时 -> 小时的倍数(总的)
            // 总的小时数 % 24 => 不满一天的小时数
            var hour = parseInt(time / (60 * 60)) % 24;
            console.log(hour);

            // 总的时间 / 一分钟 -> 分钟的倍数(总的)
            // 总的分钟数 % 60 => 不满一小时的分钟数
            var minute = parseInt(time / 60) % 60;
            console.log(minute);

            var second = time % 60;
            console.log(second);

            pattern = pattern.replace("dd",day).replace("hh",hour).replace("mm",minute).replace("ss",second);

            ele.innerHTML = pattern;  //输出提替换后的模板
        }else{  //超出给定时间
             // 你: 10000   同桌: 8000    => 1000/8000 = > 1.25
            // 总的时间 / 一天的时间 -> 天的倍数 
            var day = parseInt(time / (24 * 60 * 60));
            console.log(day);

            // 总的时间 % 一天的时间 -> 不满一天的时间
            // 不满一天的时间 / 一小时 -> 小时的倍数(不满一天)
            // var hour = parseInt(time % (24 * 60 * 60) / (60 * 60));
            // console.log(hour);

            // 总的时间 / 一小时 -> 小时的倍数(总的)
            // 总的小时数 % 24 => 不满一天的小时数
            var hour = parseInt(time / (60 * 60)) % 24;
            console.log(hour);

            // 总的时间 / 一分钟 -> 分钟的倍数(总的)
            // 总的分钟数 % 60 => 不满一小时的分钟数
            var minute = parseInt(time / 60) % 60;
            console.log(minute);

            var second = time % 60;
            console.log(second);

            ele.innerHTML = `倒计时结束,超出${endTime}时间:${-day}天${-hour}时${-minute}分${-second}秒`;  
        }
        

        
    }





</script>

</html>